<template>
<!-- 修改个人信息 -->
  <div class="box">
    <div class="top">
      <span @click="getlog()">取消</span>
      <b>修改昵称</b>
      <p @click="saves()">保存</p>
    </div>
    <input
      class="inpts"
      type="text"
      :placeholder="name"
      v-model="values"
    />
    <p class="busu">限制2~12个中文、英文或者数字</p>
  </div>
</template>
<script>
import * as API from '@/components/api/hanjinqi.js'
export default {
  data() {
    return {
      values: "",
      name:JSON.parse(localStorage.getItem("token")).name
    };
  },
  methods: {
    //点击保存
    async saves() {
      //   中文
      let arr = /^[a-zA-Z0-9\u4e00-\u9fa5]{2,12}$/;
      if (this.values.length > 2 && this.values.length < 12) {
        if (arr.test(this.values)) {
           let res=await API.hpictur({uid:JSON.parse(localStorage.getItem('token')).uid,name:this.values})
           res.data.gender=JSON.parse(res.data.gender)
           localStorage.setItem("token",JSON.stringify(res.data))
           this.$router.go(-1)
        } else {
          alert("输入的格式有误");
        }
      } else {
        alert("不符合条件");
      }
    },
    // 点击取消
    getlog(){
        this.$router.go(-1);

    }
    
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 830px;
  /* height: 100vh; */
  z-index: 666;
  position: fixed;
  left: 0;
  top: 0;
  background: #f5f5f5;
}
.box .top {
  width: 100%;
  height: 3rem;
}
.top span {
  width: 10%;
  float: left;
  line-height: 3rem;
  margin-left: 0.5rem;
}
.top b {
  margin-left: 30%;
  line-height: 3rem;
  float: left;
  color: #424242;
}
.top p {
  float: right;
  line-height: 3rem;
  color: #f25c2b;
  font-weight: 600;
  margin-right: 0.5rem;
}
.box .inpts {
  width: 100%;
  background: #fefefe;
  height: 3rem;
  border: none;
  font-size: 1rem;
  padding-left: 1rem;
  outline: none;
}
.box .busu {
  width: 100%;
  margin: 1rem 0 0 0.5rem;
  color: #b3b2b3;
}
</style>